<template>
  <!-- <div class="griod_top">
            <div class="div1">
              <dl>
                <dt>
                  <img
                    src="../../../public/images/image.png"
                    alt=""
                    style="width: 100%; height: 100%"
                  />
                </dt>
                <dd>
                  <b>1号楼</b>
                  <p>设备数量：5000</p>
                  <span>正常设备：240 <b>故障设备：140</b></span>
                </dd>
              </dl>
            </div>
            <div class="div2">
              <dl>
                <dt>
                  <img
                    src="../../../public/images/image.png"
                    alt=""
                    style="width: 100%; height: 100%"
                  />
                </dt>
                <dd>
                  <b>1号楼</b>
                  <p>设备数量：5000</p>
                  <span>正常设备：240 <b>故障设备：140</b></span>
                </dd>
              </dl>
            </div>
            <div class="div3">
              <dl>
                <dt>
                  <img
                    src="../../../public/images/image.png"
                    alt=""
                    style="width: 100%; height: 100%"
                  />
                </dt>
                <dd>
                  <b>1号楼</b>
                  <p>设备数量：5000</p>
                  <span>正常设备：240 <b>故障设备：140</b></span>
                </dd>
              </dl>
            </div>
          </div> -->

          
     
  <div class="left-top-top-top" v-for="(item, index) in tabdata" :key="index">
    <div class="left-top-left">
      <img :src="item.img" alt="" />
    </div>
    <div class="left-top-box">
      <p style="font-size: 12px;">{{ item.floor }}</p>
      <p>
        正常数量：<span>{{ item.normalNum }}</span>
      </p>
    </div>
       <div class="left-top-box">
            <p>
              设备数量：<span>{{ item.handclapNum }}</span>
            </p>
            <p>
              故障数量：<span style="color:#956745">{{ item.equipmentNum }}</span>
            </p>
          </div>
  </div>

</template>

<script setup lang="ts">
import { getAflefttop } from "@/api/server";
import { onMounted, ref } from "vue";
const tabdata = ref("");
onMounted(async () => {
  let res = await getAflefttop();
  console.log(res.data.data.result[0], "ckjsxncnncncnzcxnzc");
  tabdata.value = res.data.data.result[0];
});
</script>

<style scoped lang="scss">
//  .griod_top {
//   width: 100%;
//   height: 100%;
//   color: aliceblue;
//   font-size: 13px;
//   display: flex;
//   flex-direction: column;
//   .div1 {
//     width: 100%;
//     height: 33%;
//     //  background: pink;
//     dl {
//       width: 100%;
//       height: 100%;
//     }
//     dl dt {
//       float: left;
//       border: 1px solid #000;
//       width: 20%;
//       height: 90%;
//       margin-left: 10px;
//       margin-top: 3px;
//     }
//     dl dd {
//       float: left;
//       margin-left: 10px;
//       width: 70%;
//       margin-top: 3px;
//       border: 1px solid #000;
//     }
//   }
//   .div2 {
//     flex: 1;
//     dl {
//       width: 100%;
//       height: 100%;
//     }
//     dl dt {
//       float: left;
//       border: 1px solid #000;
//       width: 20%;
//       height: 90%;
//       margin-left: 10px;
//       margin-top: 3px;
//     }
//     dl dd {
//       float: left;
//       margin-left: 10px;
//       width: 70%;
//       margin-top: 3px;
//       border: 1px solid #000;
//     }
//   }
//   .div3 {
//     width: 100%;
//     height: 33%;
//     // background: red;
//     dl {
//       width: 100%;
//       height: 100%;
//     }
//     dl dt {
//       float: left;
//       border: 1px solid #000;
//       width: 20%;
//       height: 90%;
//       margin-left: 10px;
//       margin-top: 3px;
//     }
//     dl dd {
//       float: left;
//       margin-left: 10px;
//       width: 70%;
//       margin-top: 3px;
//       border: 1px solid #000;
//     }
//   }
// }

.left-top-top-top {
  width: 100%;
  height: 30%;
  margin: 2px 0 10px 0;
  border:  solid 1px #ccc;
  display: flex;
  
  // background: blue;

  .left-top-left {
    width: 30%;
    display: flex;
    justify-content: center;
    padding: 10px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .left-top-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    color: #ffffff;
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    font-size: 11px;

    span {
      color: #5eb4b5;
    }
  }
}
</style>